import React from 'react'
import type { FC } from 'react'
import { useNavigate } from 'react-router-dom'
import { useStore } from '@/hooks'
import { observer } from 'mobx-react'
import { Button, useColorMode } from '@chakra-ui/react'
import Card from '@/components/Card'
import Form from '@/components/Form'


const Home: FC = () => {
  const navigate = useNavigate()
  const { CountStore } = useStore()
  const { count, getData } = CountStore

  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <>
      <h1>Home</h1>
      <Button onClick={() => navigate('/about')}>去About</Button>
      <div>count: {count}</div>
      <span>当前主题：{colorMode}</span>
      <Button onClick={toggleColorMode}>切换主题</Button>
      <Card size="md" variant="danger">hello</Card>
      <Form></Form>
      <Button onClick={getData}>触发请求</Button>
    </>
  )
}

export default observer(Home)
